<script setup lang="ts">
  import { computed, ref, watch } from 'vue'

  const props = defineProps<{
    fontSize?: number
    type?: 'primary' | 'warning' | 'error' | 'success' | 'info'
    disabled?: boolean
    color?: string
  }>()

  // 链接组件样式
  const hLinkStyle = computed(() => {
    let result = `font-size: ${props.fontSize || 12}px;`
    props.color && (result += `color: ${props.color};`)
    props.disabled && (result += 'text-decoration: none; color: #C0C4CC; cursor: not-allowed;')
    return result
  })

  // 链接类型
  const linkType = ref<'primary' | 'warning' | 'error' | 'success' | 'info'>('primary')

  watch(
    props,
    (value) => {
      if (['primary', 'warning', 'error', 'success', 'info'].includes(value.type)) {
        linkType.value = value.type
      }
    },
    { immediate: true },
  )
</script>

<template>
  <div class="h_link" :style="hLinkStyle" :class="linkType">
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">
  .h_link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;

    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .primary {
    color: $primaryColor;
  }

  .warning {
    color: $secondColor2;
  }

  .success {
    color: $secondColor3;
  }

  .error {
    color: $deleteColor;
  }

  .info {
    color: #909399;
  }
</style>
